<script setup lang="ts">
import { ref } from 'vue'

const buttonModeList = ref(['default', 'dark'])
const thememode = ref('default')
function changeMode(val: string) {
  thememode.value = val;
  const dom = document.documentElement;
  buttonModeList.value.forEach(element => {
    dom.removeAttribute(element)
  });
  if (val !== 'default') {
    dom.setAttribute(val, '');// <html dark>
    dom.setAttribute('data-theme', val);  // <html data-theme="dark">
  } else {
    dom.setAttribute('data-theme', '');// <html data-theme>
  }
}
</script>

<template>

  <div class="container">
    <header>
      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
      <div>当前主题：{{ thememode }}</div>
      <div>
        点击按钮切换主题
      </div>
      <div class="desc">css 属性值中的 <p> var(--demo-text-color--light-9) </p>是一个css变量。其中 <p> demo </p>
        对应 <p> src/theme/variables.scss </p> 文件中的
        <p> $text-color </p> 变量 。可以在 <p> src/theme/index.scss </p> 中覆盖
      </div>
    </header>

    <main>
      <button v-for="btn in buttonModeList" :key="btn" @click="changeMode(btn)">{{ btn }}</button>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  width: 50vw;
  margin: auto;

  header {
    margin: 2vw auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 4vw;
    font-size: 3vw;
    color: var(--demo-text-color--light-9);

    .logo {
      display: block;
      height: 5vw;
      width: auto;
      margin-bottom: 1vw;
    }

    .desc {
      font-size: 1.6vw;
      margin-top: 1vw;
      overflow: hidden;
      line-height: 2.4vw;

      p {
        display: inline-block;
        color: var(--demo-color-primary--light-9);
        white-space: normal;
        word-wrap: break-word;
        font-weight: 700;
      }
    }
  }

  main {
    flex: 1;
    margin-top: 0.8vw;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      margin: 0.1vw 0.5vw;
      padding: 0.5vw 1vw;
      flex: 1;
      max-width: 10vw;
      font-size: 1.8vw;
      line-height: 2.2vw;
      transition: 1s;
      border-radius: 0.5vw;
      border: 1px solid var(--demo-color-primary--light-9);
      background: var(--demo-color-primary--light-8);
      color: var(--demo-bg-color);

      &:hover {
        cursor: pointer;
        background: var(--demo-color-primary--light-3);
        border-color: var(--demo-color-primary--light-7);
      }
    }
  }
}
</style>
